<template>
  <t-dialog v-if="isDialog" :header="`${header}-审批、评审记录`" :visible.sync="visible" :onClose="closeDialog"
    :closeOnOverlayClick="false" :confirmBtn="null" width="80%" top="5%" id="dialog">
    <div style="height: 65vh">
      <t-tabs v-model="tabValue" @change="handleChange" id="tabs">
        <t-tab-panel value="1" class="tab-panel" label="审批记录" :destroyOnHide="true">
          <t-table rowKey="id" :data="data" :columns="columns" hover :loading="dataLoading">
            <template #approveType="{ row }">
              {{ row.approveType | filterByDict(dict.type.approve_type) }}
            </template>
            <template #approveStatus="{ row }">
              <t-tag v-if="row.approveStatus" :theme="handleTheme(row.approveStatus, dict.type.approve_status)"
                variant="light">
                {{ row.approveStatus | filterByDict(dict.type.approve_status) }}
              </t-tag>
              <t-tag v-else theme="warning" variant="light">待审批 </t-tag>
            </template>
          </t-table>
        </t-tab-panel>


      </t-tabs>
    </div>
  </t-dialog>
  <div v-else>
    <t-tabs v-model="tabValue" @change="handleChange">
      <t-tab-panel value="1" class="tab-panel" label="审批记录" :destroyOnHide="true">
        <t-table rowKey="id" :data="data" :columns="columns" hover :loading="dataLoading">
          <template #approveType="{ row }">
            {{ row.approveType | filterByDict(dict.type.approve_type) }}
          </template>
          <template #approveStatus="{ row }">
            <t-tag v-if="row.approveStatus" :theme="handleTheme(row.approveStatus, dict.type.approve_status)"
              variant="light">
              {{ row.approveStatus | filterByDict(dict.type.approve_status) }}
            </t-tag>
            <t-tag v-else theme="warning" variant="light">待审批 </t-tag>
          </template>
        </t-table>
      </t-tab-panel>

    </t-tabs>
  </div>
</template>

<script>

export default {
  name: 'approve-list',
  dicts: [
    'approve_type',
    'subject_classification',
    'prof_tit',
    'duty',
    'recommend_type',
    'approve_status',
    'kjxm_ys_review_status',
  ],
  components: {
  },
  props: {
    objId: [String, Number],
    row: Object,
    // header: String,
    isDialog: {
      type: Boolean,
      default: true,
    },
    header: {
      type: String,
      default: '',
    },
    projectName: {
      type: String,
    },
    tabDefaultValue: {
      type: String,
      default: '1',
    },
  },
  data () {
    return {
      site_tag: import.meta.env.VITE_SITE_TAG,
      tabValue: this.tabDefaultValue,
      dialog: {
        objId: 0,
        teamId: 0,
        open: false,
      },
      visible: true,
      data: [],
      columns: [
        // {
        //   colKey: "businessId",
        //   title: "业务id",
        //   align: "center"
        // },
        {
          colKey: 'businessName',
          title: '业务名称',
          align: 'center',
          ellipsis: true,
        },
        {
          colKey: 'approveType',
          title: '审批业务类型',
          align: 'center',
        },
        {
          colKey: 'approverName',
          title: '审批人',
          align: 'center',
        },
        {
          colKey: 'deptName',
          title: '单位',
          align: 'center',
        },
        {
          colKey: 'opinion',
          title: '审批意见',
          align: 'center',
          width: 300,
          // ellipsis: true
        },
        {
          colKey: 'approveStatus',
          title: '审批结果',
          align: 'center',
        },
        {
          colKey: 'updateTime',
          title: '审批时间',
          align: 'center',
          width: 200,
        },
      ],

      dataLoading: false,
    };
  },
  created () {
    this.getList();
  },
  methods: {
    handleChange (val) {
    },

    getList () {
      this.dataLoading = true;
      this.$api.kjrc.approve
        .getByBusinessId(this.objId)
        .then((response) => {
          this.data = response.data;
          this.dataLoading = false;
        })
        .catch((e) => {
          this.dataLoading = false;
          this.$message.error(e.toString());
        });
    },

    closeDialog () {
      this.$emit('update:visible', false);
    },
  },
};
</script>

<style lang="less" scoped>
.t-tab-panel {
  padding: 10px;
}

.tab-panel {
  height: calc(65vh - 64px);
  overflow: scroll;
}

.temLeaderOpinion {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
}
</style>
